<template>
  <div @click="bodyClick($event)" id="lv-pop-up">
    <transition name="slide-fade">
      <div class="lv-content">
        <div class="lv-content-title">
          <div v-if="active === '0'">
            step:1 {{groupText}}
          </div>

          <div v-if="active === '1'">
            step:2 情绪导向
          </div>

          <div>
            <i class="el-icon-close" @click="close" style="color: black;cursor: pointer"></i>
          </div>
        </div>

        <div class="lv-content-tree">
          <div class="lv-content-tree-label">
            <h4 style="width: 80px">标签组：</h4>
            <el-input placeholder="新标签组"
                      size="mini"
                      @input="lgInputChange"
                      v-model="myInputText"
            ></el-input>
          </div>
          <!--<div style="height: 750px;">-->
          <div style="height: 65vh;">
            <el-tree
              :data="treeData"
              show-checkbox
              default-expand-all
              node-key="key"
              ref="tree"
              :props="defaultProps"
              @check="onTreeSelected"
              :default-checked-keys="tree_checked_keys"
              :filter-node-method="filterNode"
              :render-content="renderContent"
              @node-expand="doFiter"
            >
            </el-tree>
            <!--:show-checkbox="hasCheck"-->
          </div>
          <div class="lv-footer">
            <el-button @click="cancel" v-if="active === '0'">取消</el-button>
            <el-button :disabled="isDisabled" style="margin-right: 20px;" type="primary" @click="next"
                       v-if="active === '0'">下一步
            </el-button>
            <el-button @click="last"
                       v-if="active === '1'">上一步
            </el-button>
            <el-button :disabled="isDisabled" style="margin-right: 20px;" type="primary"
                       v-if="active === '1'" @click="submitData">提交
            </el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import {Tree, Input, Button, Switch} from 'element-ui';

let id = 1000;

/**
 * 设置显示的树结构
 * @param arr 数据
 */
const setShowTreeNode = (arr) => {
  for (var i in arr) {
    if (arr[i].isParent && arr[i].is_analysis_class == 1) {
      arr[i].childrens = arr[i].children;
      delete arr[i].children;
    } else {
      setShowTreeNode(arr[i].children)
    }
  }
};

/**
 * 设置为默认的树结构
 * @param arr 数据
 */
const setOriginalTreeNode = (arr) => {
  for (let i in arr) {
    if (arr[i].isParent && arr[i].childrens) {
      arr[i].children = arr[i].childrens;
      delete arr[i].childrens;
    } else {
      setShowTreeNode(arr[i].children)
    }
  }
};

/**
 * 获取自定义选中的树key方法
 * @param arr 数据
 */
const getDefaultCheckedKeys = (arr) => {
  let retArr = [];
  for (let i in arr) {
    retArr.push(arr[i].name);
  }
  return retArr;
};

export default {
  name: 'labelview',
  components: {
    elTree: Tree,
    elInput: Input,
    elButton: Button,
    elSwitch: Switch,
  },
  //接收父组件的值
  props: {
    treeData: Array,
    tree_checked_keys: Array,
    groupText: String,
    inputText: String,
    isDisabled: Boolean,
    isDisabled2: Boolean,
    active: String,
    checkedNodes: Array,
  },
  data() {
    return {
      hasCheck: true,
      myInputText: this.inputText,
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'key'
      },
      // groupText: null
    };
  },
  computed: {},
  watch: {
    active() {
      console.log("watch active")
      if (this.active == 0) {
        this.hasCheck = true;
      } else {
        this.hasCheck = false;
      }
      this.$refs.tree.filter();
    },
    inputText(val) {
      this.myInputText = val;//新增inputText的watch，监听变更并同步到myInputText上
    },
    myInputText(val) {
      this.$emit("on-result-change", val);//组件内对myInputText变更后向外部发送事件通知
    },

  },
  mounted() {


  },
  updated() {
    this.$refs.tree.filter();
  },
  methods: {
    bodyClick(e) {
      this.$emit('bodyClick', e);
    },
    doFiter() {
      console.info("doFiter >>>>>>")
      this.$refs.tree.filter();
    },
    filterNode(value, data, node) {
      // console.info("filterNode >>>>>>")
      // console.log(value, data, node);
      if (this.active == 0) {
        if (data.isShow) {
          return true;
        } else {
          return false;
        }
      } else {
        if (data.is_select) {
          return true;
        } else {
          return false;
        }
      }
    },
    close() {
      this.$emit('lvCloseEvent');
    },
    cancel() {
      this.$emit('lvCloseEvent');
    },
    lgInputChange(val) {
      this.$emit('lgInputChange', val)
    },
    //当树的复选框被点击的时候触发
    onTreeSelected(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
      this.$emit("lvOnTreeSelected", checkedKeys);
    },
    next() {
      this.$emit('lvNextStepEvent');
    },
    last() {
      this.$emit('lvLastStepEvent');
    },
    emotionYes(e, node) {

      const titleobj = e.target.parentNode.parentNode.previousSibling;
      if (titleobj) {
        console.log("emotionYes", titleobj);
        titleobj.classList.remove("red");
        titleobj.classList.add("green");
        node.data["emotion"] = 0; //正面
      }

    },

    emotionNo(e, node) {
      const titleobj = e.target.parentNode.parentNode.previousSibling;
      if (titleobj && titleobj.classList) {
        titleobj.classList.remove("green");
        titleobj.classList.add("red");
        node.data["emotion"] = 1; //非正面
      }

    },

    renderContent(h, {node, data, store}) {

      if (this.active == 1) {
        console.log("zhangxf");

        // return (
        // <span
        //   style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;" >
        // <span>
        //   <span title="">{node.label}</span>
        //   </span>
        //   <span>
        //     <el-button style="font-size: 12px;" type="text"
        //                class="green"
        //                on-click={(e) => {
        //                  e.stopPropagation();
        //                  this.emotionYes(e, node)
        //                }}>正面</el-button>
        //     <el-button style="font-size: 12px;" class="red" type="text"
        //                on-click={(e) => {
        //                  e.stopPropagation();
        //                  this.emotionNo(e, node)
        //                }}>非正面</el-button>
        //   </span>
        // </span>);
        return h('span',
          {
            'class': {
              'green': !node.emotion || (node.emotion && node.emotion === 0),
              'red': node.emotion && node.emotion === 1
            },
            style: {
              'flex': 1,
              'display': 'flex',
              'align-items': 'center',
              'justify-content': 'space-between',
              'font-size': '14px',
              'padding-right': '8px'
            },
          }, [
            h('span', node.label),
            h('span', {}, [
              h('el-button', {
                'class': {'green': true},
                style: {
                  'font-size': '12px'
                },
                attrs: {
                  type: 'text'
                },
                on: {
                  click: (e) => {
                    e.stopPropagation();
                    this.emotionYes(e, node)
                  }
                }
              }, '正面'),
              h('el-button', {
                'class': {'yellow': true, 'el-button': true, 'el-button--text': true},
                style: {
                  'font-size': '12px'
                },
                attrs: {
                  type: 'text'
                },
                on: {
                  click: (e) => {
                    e.stopPropagation();
                    this.emotionNo(e, node)
                  }
                }
              }, '负面及中性')
            ])
          ])
      } else {
        return h('span',
          {
            'class': {
              'green': !node.emotion || (node.emotion && node.emotion === 0),
              'red': node.emotion && node.emotion === 1
            },
            style: {
              'flex': 1,
              'display': 'flex',
              'align-items': 'center',
              'justify-content': 'space-between',
              'font-size': '14px',
              'padding-right': '8px'
            },
          }, [
            h('span', node.label),
            h('span')
          ])
      }


    },
    submitData() {
      this.$emit('submitData', this.genResult(this.treeData))
    },
    genResult(node) {
      if (!Array.isArray(node)) return []
      if (node.length <= 0) return []
      const result = []
      node.forEach(item => {
        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
          const children = this.genResult(item.children)
          if (children.length > 0) {
            const copyItem = {...item}
            copyItem.children = children
            result.push(copyItem)
          }
        } else {
          if (item.is_select) {
            result.push({...item})
          }
        }
      })
      return result
    }
  }
};
</script>
